<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS3 轮播图</title>
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.wapper{
		width: 800px;
		height: 400px;
		margin: 100px auto;
		position: relative;
		overflow: hidden;
	}
	.banner{
		list-style: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 3200px;
		height: 400px;
		transition: all 0.5s;
	}
	.banner li{
		float: left;
		width: 800px;
		height: 400px;
	}
	.banner li img{
		width: 100%;
		height: 100%;
	}
	.controls{
		width: auto;
		height: 10px;
/*		background-color: red;*/
		position: absolute;
		left: 50%;
		bottom: 10px;
		transform: translate(-50%,0);

	}
	.controls label{
		float: left;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: white;
		margin-left: 10px;

	}
	input[type=radio]{
		display: none;
	}
	.controls label:nth-child(1){
		margin-left: 0;
	}
	input[type=radio]:nth-of-type(1):checked ~ .controls label:nth-of-type(1){
		background-color: red;
	}
	input[type=radio]:nth-of-type(2):checked ~ .controls label:nth-of-type(2){
		background-color: red;
	}
	input[type=radio]:nth-of-type(3):checked ~ .controls label:nth-of-type(3){
		background-color: red;
	}
	input[type=radio]:nth-of-type(4):checked ~ .controls label:nth-of-type(4){
		background-color: red;
	}
	input[type=radio]:nth-of-type(1):checked ~ .banner{
		left: 0;
	}
	input[type=radio]:nth-of-type(2):checked ~ .banner{
		left: -800px;
	}
	input[type=radio]:nth-of-type(3):checked ~ .banner{
		left: -1600px;
	}
	input[type=radio]:nth-of-type(4):checked ~ .banner{
		left: -2400px;
	}
	
</style>
<body>
	<div class="wapper">
		<!--input 为什么放在最上面？ css只能获取到一个元素后边的元素，不能获取一个元素前面的元素 -->
		<input type="radio" checked name="control" id="control1">
		<input type="radio" name="control" id="control2">
		<input type="radio" name="control" id="control3">
		<input type="radio" name="control" id="control4">
		<ul class="banner">
			<li><img src="http://p9.qhimg.com/bdm/960_593_0/t01d2199eb3d320c511.jpg"></li>
			<li><img src="http://p5.qhimg.com/bdm/960_593_0/t01eedfd2d6cb530d9f.jpg"></li>
			<li><img src="http://p0.qhimg.com/bdm/960_593_0/t01d381b84989b61f26.jpg"></li>
			<li><img src="http://p2.qhimg.com/bdm/960_593_0/t012665f44a5971d3c4.jpg"></li>
		</ul>
		<div class="controls">
			<label for="control1"></label>
			<label for="control2"></label>
			<label for="control3"></label>
			<label for="control4"></label>
		</div>
	</div>
	
</body>
</html>